import {
  Component,
  Input,
  Output,
  EventEmitter,
  AfterViewInit,
  ElementRef,
  Renderer2,
  SimpleChange,
  OnChanges,
  SimpleChanges,
  ChangeDetectorRef,
  ChangeDetectionStrategy,
} from '@angular/core';

import { ToDoItem } from './interface';
import { Router } from '@angular/router';
import { toNumber, toBoolean } from '@shared/apes/core/util/convert';
import { isArray } from 'util';
import { UserAuthService } from '@core/services/user-auth.service';
import { deepClone } from '../../utils/utils';

@Component({
  selector: 'todolist',
  template: `
    <div *ngIf="data?.length > 0" class="item" [class.fn-item-template]="template" (click)="open()">
      <apes-badge *ngIf="!template" [apesCount]="count">
        <i apes-icon [apesType]="icon"></i>
      </apes-badge>
      <!-- 赋能平台定制样式  start-->
      <apes-badge *ngIf="template" [apesCount]="count"
                  [apesStyle]="{ backgroundColor: '#F9DE48',boxShadow: 'none',color: '#333',
                   fontSize: '14px',fontWeight: '400'}">
        <i *ngIf="icon === 'bell'"><img src="./assets/tmp/img/fn/notification.png"
                                        style="width: 32px;height: 32px;"></i>
        <i *ngIf="icon === 'message'"><img src="./assets/tmp/img/fn/cc.png" style="width: 32px;height: 32px;"></i>
      </apes-badge>
      <!-- 赋能平台定制样式  end-->
    </div>
    <apes-drawer [apesVisible]="visible"
                 [apesWidth]="_width"
                 (apesOnClose)="close()"
                 [apesBodyClass]="_classMap"
                 [apesClosable]="false">

      <div class="todo-list-main scroll-host">
        <ng-container *ngFor="let tab of data">
          <apes-card class="todo-list-main-content scroll-host">
            <todo-tab
              [data]="tab"
              (read)="markRead($event)"
              (select)="onSelect($event)"></todo-tab>
          </apes-card>
        </ng-container>
      </div>

    </apes-drawer>
  `,
  styles: [`
    /*.fn-item-template {*/
    /*  padding: 0 10px !important;*/
    /*  line-height: 80px !important;*/
    /*}*/
  `],
  host: { '[class.apes-todo]': 'true' },
  preserveWhitespaces: false,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TodoListComponent implements AfterViewInit,OnChanges {
  private _count: number;
  private _data: ToDoItem[] = [];
  visible = false;
  _width: number = 336;
  _height: number;
  _classMap = {
    [`backlog-drawer`]: true,
  };
  template: boolean = false;

  open(): void {
    // console.log(this._data);
    this.visible = true;
  }

  close(): void {
    this.visible = false;
  }

  @Input() icon: string;


  @Input()
  get data() {
    return this._data;
  }

  set data(value: any) {

    this._data = isArray(value) ? value : [];
  }

  /** 图标上的消息总数 [apesActive]="panel.active" **/
  @Input()
  get count() {
    return this._count;
  }

  set count(value: any) {
    this._count = toNumber(value, null);
  }

  /** 弹出卡片加载状态 **/
  @Input()
  get loading() {
    return this._loading;
  }

  set loading(value: any) {
    this._loading = toBoolean(value);
  }

  private _loading = false;

  constructor(
    private el: ElementRef,
    private renderer: Renderer2,
    private cd: ChangeDetectorRef,
    private userAuthService: UserAuthService
  ) {
    let platform = this.userAuthService.getUserInfoObj() ? this.userAuthService.getUserInfoObj().platform : '';
    if (platform == 'fn' || platform == 'zt' || platform == 'gys') {
      this.template = true;
    }
  }

  ngOnChanges(changes: SimpleChanges): void {
    // this.data();
    // console.log(this._data);
    let data = deepClone(this._data);
    this._data = [];
    this._data = [...data];
    this.cd.markForCheck();
  }

  @Output() select = new EventEmitter<any>();
  @Output() read = new EventEmitter<any>();

  /** 手动控制Popover显示 **/
  @Input()
  get popoverVisible() {
    return this._popoverVisible;
  }

  set popoverVisible(value: any) {
    this._popoverVisible = toBoolean(value);
  }

  private _popoverVisible = false;

  @Output() popoverVisibleChange = new EventEmitter<boolean>();

  onVisibleChange(result: boolean) {
    if (result === false) return;
    this.popoverVisibleChange.emit(result);
  }

  onSelect(i: any) {
    this.select.emit(i);
    this.popoverVisible = false;
    this.loading = false;
    this.onVisibleChange(false);
    this.visible = false;
  }

  markRead(i: any){
    this.read.emit(i);
  }

  /** 根据屏幕显示控制抽屉宽度 **/
  ngAfterViewInit() {
    setTimeout(() => {
      let clientWidth = window.document.body['clientWidth'];
      if (clientWidth >= 768) {
        this._width = clientWidth / 2;
      } else {
        this._width = clientWidth / 1.1;
      }
      this._height = window.document.body['clientHeight'] - 24 - 24;
    }, 200);
    // const cardContent = document.querySelector('.backlog-card');
    // const cardHeight = window.document.body['clientHeight'] - 24 - 24;
    // this.renderer.setStyle(cardContent, 'height', cardHeight + 'px');
  }

}
